<script lang="ts" setup>
import type { Ref } from 'vue';

import { inject, ref, watch } from 'vue';

import { ElClose } from '@vben/icons';

import {
  ElCard,
  ElCol,
  ElDivider,
  ElIcon,
  ElMessage,
  ElRow,
  ElScrollbar,
  ElTag,
} from 'element-plus';

import { useClickOutside } from '#/hooks';
import { getStyleLibraryUrl, getStyleTemplate } from '#/utils';

const emit = defineEmits(['closeStyleLibrary', 'applyStyle']);
const isDragging: Ref<Boolean> = inject('isDragging', ref(false));
const currentLayer = inject('currentSelectedLayer') as any;
const styleLibraryRef: Ref<HTMLElement | null> = ref(null);
const styleCategories = ref([
  {
    id: 1,
    label: '点矢量',
    value: 'point',
    styles: [
      {
        id: '1-1',
        label: '点单一值',
        value: 'singleValueRender',
        subValue: 'singleValueRender',
        imgName: '点单一值',
      },
      {
        id: '1-2',
        label: '点单一值（轮廓）',
        value: 'singleValueRender',
        subValue: 'singleValueRender_outline',
        imgName: '点单一值_轮廓',
      },
      {
        id: '1-3',
        label: '点唯一值（随机）',
        value: 'uniqueValueRender',
        subValue: 'uniqueValueRender_random',
        imgName: '点唯一值_随机',
      },
      {
        id: '1-4',
        label: '点分级（颜色）',
        value: 'hierarchicalRender',
        subValue: 'hierarchicalRender_color',
        imgName: '点分级_颜色',
      },
      {
        id: '1-5',
        label: '点分级（半径）',
        value: 'hierarchicalRender',
        subValue: 'hierarchicalRender_radius',
        imgName: '点分级_半径',
      },
      {
        id: '1-6',
        label: '点渐变',
        value: 'gradualValueRender',
        subValue: 'gradualValueRender_asc',
        imgName: '点渐变',
      },
      {
        id: '1-7',
        label: '热力图',
        // label: '热力图（点位）',
        value: 'heatMap',
        subValue: 'heatMap',
        imgName: '热力图',
        limited: 'GeoJSON',
      },
      // {
      //   id: '1-8',
      //   label: '热力图（属性）',
      //   value: 'heatMap',
      //   subValue: 'heatMap',
      //   img: '../../styleLibrary/热力图.png',
      //   limited: 'GeoJSON'
      // },
      {
        id: '1-8',
        label: '聚合图',
        value: 'cluster',
        subValue: 'cluster',
        imgName: '聚合图',
        limited: 'GeoJSON',
      },
    ],
  },
  {
    id: 2,
    label: '线矢量',
    value: 'line',
    styles: [
      {
        id: '2-1',
        label: '线单一值',
        value: 'singleValueRender',
        subValue: 'singleValueRender',
        imgName: '线单一值',
      },
      {
        id: '2-2',
        label: '线单一值（虚线）',
        value: 'singleValueRender',
        subValue: 'singleValueRender_dashed',
        imgName: '线单一值_虚线',
      },
      {
        id: '2-3',
        label: '线单一值（双线）',
        value: 'singleValueRender',
        subValue: 'singleValueRender_double_solid',
        imgName: '线单一值_双线',
      },
      {
        id: '2-4',
        label: '线唯一值（随机）',
        value: 'uniqueValueRender',
        subValue: 'uniqueValueRender_random',
        imgName: '线唯一值_随机',
      },
      {
        id: '2-5',
        label: '线分级（颜色）',
        value: 'hierarchicalRender',
        subValue: 'hierarchicalRender_color',
        imgName: '线分级_颜色',
      },
      {
        id: '2-6',
        label: '线分级（宽度）',
        value: 'hierarchicalRender',
        subValue: 'hierarchicalRender_radius',
        imgName: '线分级_宽度',
      },
      {
        id: '2-7',
        label: '线渐变',
        value: 'gradualValueRender',
        subValue: 'gradualValueRender_asc',
        imgName: '线渐变',
      },
    ],
  },
  {
    id: 3,
    label: '面矢量',
    value: 'polygon',
    styles: [
      {
        id: '3-1',
        label: '面单一值',
        value: 'singleValueRender',
        subValue: 'singleValueRender',
        imgName: '面单一值',
      },
      {
        id: '3-2',
        label: '面唯一值（随机）',
        value: 'uniqueValueRender',
        subValue: 'uniqueValueRender_random',
        imgName: '面唯一值_随机',
      },
      {
        id: '3-3',
        label: '面分级（颜色）',
        value: 'hierarchicalRender',
        subValue: 'hierarchicalRender_color',
        imgName: '面分级_颜色',
      },
      {
        id: '3-4',
        label: '面渐变',
        value: 'gradualValueRender',
        subValue: 'gradualValueRender_asc',
        imgName: '面渐变',
      },
    ],
  },
  {
    id: 4,
    label: '栅格',
    value: 'raster',
    styles: [
      {
        id: '4-1',
        label: '地形阴影',
        value: 'singleBandRasterRender',
        subValue: 'hillshade',
        imgName: '地形阴影',
        limited: 'DEM',
      },
    ],
  },
]);

const closeStyleLibrary = () => {
  emit('closeStyleLibrary');
};
useClickOutside(styleLibraryRef, closeStyleLibrary);

const getRenderType = (value: string) => {
  switch (value) {
    case 'cluster':
    case 'heatMap':
    case 'OD': {
      return ['StyleMapping', value];
    }
    case 'gradualValueRender':
    case 'hierarchicalRender':
    case 'singleValueRender':
    case 'uniqueValueRender': {
      return ['BasicMapping', value];
    }
    case 'multiBandRasterRender':
    case 'singleBandRasterRender': {
      return ['RasterMapping', value];
    }
    default: {
      return null;
    }
  }
};
const applyStyle = (category: string, style: string, subStyle: string) => {
  if (style === 'cluster') {
    ElMessage.warning('暂未开放！');
    return;
  }
  // console.log(category, style, subStyle);

  // console.log(getStyleTemplate(category, style, subStyle));
  // console.log(currentLayer.value);
  // console.log(getRenderType(style));

  currentLayer.value.templateParams = getStyleTemplate(
    category,
    style,
    subStyle,
  );
  currentLayer.value.templateRenderType = getRenderType(style);

  emit('applyStyle', getRenderType(style));
  if (
    ['gradualValueRender', 'hierarchicalRender', 'uniqueValueRender'].includes(
      style,
    )
  ) {
    ElMessage.warning('当前渲染方式需要选择字段，已默认选择首个字段');
  }
};
watch(
  () => isDragging.value,
  (newVal) => {
    if (newVal) {
      closeStyleLibrary();
    }
  },
);
</script>

<template>
  <div class="container" ref="styleLibraryRef">
    <div class="header">
      <span>样式库</span>
      <div class="close-btn-box" title="关闭" @click="closeStyleLibrary">
        <ElIcon>
          <ElClose />
        </ElIcon>
      </div>
    </div>
    <ElDivider style="margin-top: 2px; margin-bottom: 4px" />
    <div class="style-body">
      <ElScrollbar>
        <div
          class="style-category"
          v-for="styleCategory in styleCategories"
          :key="styleCategory.id"
        >
          <div class="style-category-title">
            {{ styleCategory.label }}&nbsp;
            <ElTag round effect="dark" size="small" disable-transitions>
              {{ styleCategory.styles.length }}
            </ElTag>
          </div>
          <div class="style-category-list">
            <ElRow
              v-for="(_row, rowIndex) in Math.floor(
                styleCategory.styles.length / 3,
              ) + 1"
              :key="rowIndex"
            >
              <ElCol
                :span="8"
                v-for="{
                  id,
                  label,
                  value,
                  subValue,
                  imgName,
                  limited,
                } in styleCategory.styles.filter(
                  (_item, index) =>
                    index >= rowIndex * 3 && index < (rowIndex + 1) * 3,
                )"
                :key="id"
              >
                <ElCard
                  :body-style="{ padding: '0px' }"
                  @click="applyStyle(styleCategory.value, value, subValue)"
                  shadow="hover"
                  class="animate-card animate-card-2"
                >
                  <template #header>
                    <div class="card-header">
                      <span>{{ label }}</span>
                      <ElTag
                        v-if="limited"
                        size="small"
                        type="success"
                        disable-transitions
                      >
                        {{ limited }}
                      </ElTag>
                    </div>
                  </template>
                  <div class="animate-card__layer">
                    <img
                      :src="getStyleLibraryUrl(imgName)"
                      class="image"
                      :title="label"
                    />
                  </div>
                  <div class="animate-card__sublayer">
                    <div>点击应用</div>
                  </div>
                </ElCard>
              </ElCol>
              <ElDivider
                v-if="
                  styleCategory.styles.some(
                    (_item, index) =>
                      index >= rowIndex * 3 && index < (rowIndex + 1) * 3,
                  )
                "
                border-style="hidden"
                style="margin-top: 6px; margin-bottom: 6px"
              />
            </ElRow>
          </div>
        </div>
      </ElScrollbar>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.container {
  box-sizing: border-box;
  width: 525px;
  height: 400px;
  padding: 10px;
  padding-top: 5px;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 30px;

  span {
    font-size: 17px;
    font-weight: bold;
    line-height: 30px;
  }

  .close-btn-box {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 100%;

    &:hover {
      color: #409eff;
      cursor: pointer;
      border: #409eff 1px solid;
    }
  }
}

.style-body {
  width: 100%;
  height: 350px;

  .style-category {
    width: 100%;

    .style-category-title {
      display: flex;
      align-items: center;
      padding-left: 2px;
      margin: 2px 0 8px;
      font-size: 14px;
      color: #303133;
      // font-weight: 600;
      border-left: 3px solid #409eff;
    }
  }
}

.style-category-list {
  .el-card {
    position: relative;
    width: 150px;
    height: 110px;

    &:hover {
      cursor: pointer;
    }
  }

  .card-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;

    &::before {
      position: absolute;
      right: 100%;
      bottom: -3px;
      left: 0;
      z-index: 1;
      height: 2px;
      content: '';
      background-color: #409eff;
      transition: right 0.3s ease-out;
    }

    // &:hover {
    //   &::before {
    //     right: 0;
    //   }
    // }

    .el-tag {
      font-size: 10px;
    }

    .el-tag--small {
      height: 16px;
      padding: 2px 5px;
    }
  }

  :deep(.el-card__header) {
    height: 25px;
    padding: 4px;
    font-size: 11px;
    color: rgb(96 98 102);
  }

  .image {
    width: 100%;
    height: 85px;

    &:hover {
      opacity: 0.7;
    }
  }
}

.style-category-title .el-tag--small {
  height: 14px;
  padding: 6px 5px;
}

.style-category-title .el-tag {
  font-size: 10px;
}

.animate-card {
  position: relative;
  overflow: hidden;
}

.animate-card-2 {
  .animate-card {
    &__layer {
      transition: 0.5s;
    }

    &__sublayer {
      position: absolute;
      top: 100%;
      left: 0;
      width: 100%;
      height: 100%;
      padding: 30px 0 20px;
      font-size: 12px;
      color: #fff;
      text-align: center;
      background-color: rgb(122 122 122 / 50%);
      // opacity: 0.7;
      transition: 0.5s;
    }
  }

  &:hover {
    .card-header::before {
      right: 0;
    }

    .animate-card {
      &__layer {
        transform: scale(1.03);
      }

      &__sublayer {
        top: 22%;
      }
    }
  }
}
</style>
